"use client";
import { getFindPwdApi } from "@/api/user";
import ButtonOwn from "@/components/ButtonOwn";
import DomainFooter from "@/components/DomainFooter";
import HeaderBack from "@/components/HeaderBack";
import { useLogout } from "@/hooks/useLogout";
import { Form, Input, Toast } from "antd-mobile";
import { FormInstance } from "antd-mobile/es/components/form";
import clsx from "clsx";
import { useTranslations } from "next-intl";
import { useSearchParams } from "next/navigation";
import { FC, useRef, useState } from "react";
import { Simulate } from "react-dom/test-utils";
import "./page.scss";
import change = Simulate.change;

interface Props {}

const ResetPhone: FC<Props> = () => {
    const t = useTranslations();
    const { logout } = useLogout();

    let searchParams = useSearchParams();
    let user_phone = searchParams.get("userPhone");
    let code = searchParams.get("code");

    const findPwdRequest = ({ pwd }: { pwd: string }) => {
        getFindPwdApi({ user_phone, code, pwd })
            .then(async (res) => {
                if (res.code == 200) {
                    Toast.show({ icon: "success", content: t("code.200"), maskClickable: false });
                    await logout();
                }
            })
            .catch((error) => {
                Toast.show(t(`code.${error.data.code}`));
            });
    };

    /**
     * @description
     */
    const [visible, setVisible] = useState(false);
    const spanClassName = clsx("iconfont", {
        "icon-kejian": visible,
        "icon-bukejian": !visible,
    });
    const formRef = useRef<FormInstance>(null);
    const onFinish = (values: { pwd: string; checkPwd: string }) => {
        findPwdRequest(values);
    };
    const onValuesChange = (changeValue: { pwd: string }) => {
        if (changeValue.pwd) {
            formRef.current?.setFieldValue("pwd", changeValue.pwd.replace(/[^\w\.\/]/gi, ""));
        }
    };
    const checkValidator = (rules: any, value: string) => {
        const password = formRef.current?.getFieldValue("pwd");
        if (value !== password) {
            return Promise.reject(new Error(t("form.checkPwdReg")));
        }
        return Promise.resolve();
    };

    return (
        <div className="confirmPassword-box">
            <HeaderBack />
            <div className="main custom-form">
                <div className="title">
                    <h2>{t("confirmPwdPage.title")}</h2>
                    {/* <div>修改密码 {user_phone}</div> */}
                </div>
                <Form
                    style={{
                        "--border-bottom": "none",
                        "--border-top": "none",
                        "--border-inner": "none",
                    }}
                    onFinish={onFinish}
                    ref={formRef}
                    onValuesChange={onValuesChange}
                    footer={<ButtonOwn active>{t("confirmPwdPage.complete")}</ButtonOwn>}
                >
                    <Form.Item
                        name="pwd"
                        label=""
                        extra={
                            <span
                                className={spanClassName}
                                onClick={() => setVisible(!visible)}
                            ></span>
                        }
                        rules={[
                            { required: true, message: t("form.passwordReg") },
                            { min: 6, max: 20, message: t("form.passwordMinReg") },
                        ]}
                    >
                        <Input
                            placeholder={t("form.newPwd")}
                            maxLength={20}
                            type={visible ? "text" : "password"}
                        />
                    </Form.Item>

                    <Form.Item
                        name="checkPwd"
                        label=""
                        rules={[
                            {
                                min: 6,
                                max: 20,
                                validator: checkValidator,
                            },
                        ]}
                    >
                        <Input placeholder={t("form.checkPwd")} maxLength={20} type={"password"} />
                    </Form.Item>
                </Form>
            </div>

            <DomainFooter />
        </div>
    );
};

export default ResetPhone;